<template>
  <NavBarVue :title="'我的'" />
  <view class="myBox">
    <u-popup :show="show" mode="left" @close="openClose">
      <view style="width: 280px;height: 100%;">
        <view
            class="popup-image">
          <view style="width: 100px;height: 100px;overflow: hidden;" @click="toEditUserInfo">
            <base-cover-image :src="userStore.userInfo.userInfos?.userImage" mode="aspectFill" />
          </view>
          <view style="margin-top: 10px;">{{userStore.userInfo.userInfos?.nickName || '暂无昵称'}}</view>
        </view>
        <view style="width: 100%;overflow: hidden;">
          <view class="popup-box" v-for="(item) in upopupData" :key="item.key">
            <u-icon :name="item.iconName" size="26"></u-icon>
            <view
                class="popup-box-child"
                @click="handleClick(item.eventName)"
            >{{item.tagName}}</view>
          </view>
          <view class="layout">
            <button @click="out">退出登录</button>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 头部 -->
    <view class="myLog">
      <view class="lefticon" @click="openClose">
        <u-icon name="list" color="#ddd" size="25"></u-icon>
      </view>
      <view class="head">
        <view class="head_left">
          <view style="width: 80px;height: 80px;border-radius: 50%;overflow: hidden;">
            <base-cover-image :src="userStore.userInfo.userInfos?.userImage" mode="aspectFill" />
          </view>
          <view style="color: #aaa;margin-top: 10px;">{{userStore.userInfo.userInfos?.introduction}}</view>
        </view>
        <view class="head_right">
          <view>{{userStore.userInfo.userInfos?.nickName || '您还没有设置昵称'}}</view>
          <view style="color: #aaa;margin-top: 6px;">笔记ID：<text>{{userStore.userInfo.userInfos?.unionId}}</text></view>
          <view style="color: #aaa;margin-top: 6px;">IP属地：<text>{{userStore.userInfo.userInfos?.ipAddress}}</text></view>
        </view>
      </view>
      <view class="head_bot">
        <view class="bot_left">
          <view
              style="display: flex;flex-direction: column;justify-content: center;align-items: center;"
              v-for="(item) in atten_list"
              :key="item.type"
              @click="toTabOther(item.type)"
          >
            <view style="color: #fff;">{{item.num}}</view>
            <text style="color: #bbb;font-size: 12px;margin-top: 5px;">{{item.text}}</text>
          </view>
        </view>
        <view class="bot_right">
          <button class="btn" @click="toEditUserInfo">编辑资料</button>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main_tab">
        <u-tabs :list="tab_list" @click="tabList"></u-tabs>
      </view>
      <view class="pubu" v-if="pageResults.length">
        <ShowIndex v-if="articleStore.articleListData.objects.length" :dataList="pageResults"/>
        <WaterfallLikeVue v-else :dataList="pageResults"/>
      </view>
      <view class="pubu data" v-else>
        暂无数据~~~
      </view>
    </view>
  </view>
  <TabBarVue type="mine" />
</template>

<script setup>
import {
  computed,
  onMounted,
  reactive,
  ref,
} from 'vue'
import { onShow } from "@dcloudio/uni-app"
import {
  useUserStore,
  useArticleStore
} from '@/store'
import WaterfallLikeVue from '@/components/Waterfall_like.vue';
import ShowIndex from '@/components/ShowIndex.vue';
const tab_list = [{
  name: '笔记',
}, {
  name: '收藏',
}, {
  name: '点赞'
}]
// 渲染关注，粉丝，获赞量
const atten_list = reactive([
  {
    num: 25,
    text: '关注',
    type: 'attention',
    url: '/pages/tab-mine/attention-fan/index'
  },
  {
    num: 26,
    text: '粉丝',
    type: 'fans',
    url: '/pages/tab-mine/attention-fan/index'
  },
  {
    num: 25,
    text: '获赞和评论',
    type: 'comment',
    url: '/pages/tab-mine/comment/index'
  }
])

const upopupData = reactive([
  {
    id: 1,
    iconName: 'rmb-circle',
    tagName: '优惠劵',
    eventName: 'toDiscount'
  },
  {
    id: 2,
    iconName: 'scan',
    tagName: '扫一扫',
    eventName: 'toScan'
  },
  {
    id: 3,
    iconName: 'heart',
    tagName: '个人标签',
    eventName: 'toIdentityTag'
  },
  {
    id: 4,
    iconName: 'setting',
    tagName: '系统设置',
    eventName: 'toSystemEdit'
  }
])

const handleClick = (eventName) => {
  console.log(eventName, "|eventName");
  switch(eventName) {
    case 'toDiscount':
      toDiscount()
      return
    case 'toScan':
      toScan()
      return
    case 'toIdentityTag':
      toIdentityTag()
      return
    case 'toSystemEdit':
      toSystemEdit()
      return
    default:
      return
  }
}
// 抽屉
const show = ref(false)
// 打开弹框
const openClose = () => {
  show.value = !show.value
}
const toDiscount = () => {
  uni.navigateTo({
    url: "/pages/tab-mine/drawer/discount"
  })
}
const toScan = () => {
  uni.scanCode({
    success: () => {
      uni.showToast({
        title: '扫描成功'
      })
    }
  })
}
const toIdentityTag = () => {
  uni.navigateTo({
    url: "/pages/tab-mine/drawer/identity-tag"
  })
}

const toSystemEdit = () => {
  uni.showToast({
    title: '系统设置'
  })
}

// 跳转到点赞，粉丝和获赞、评论
const toTabOther = (type) => {
  let url = ''
  for (let s of atten_list) {
    if(s.type === type) {
      url = s.url
    }
  }
  uni.navigateTo({
    url
  })
}

// 编辑用户资料
const toEditUserInfo = () => {
  uni.navigateTo({
    url: '/pages/tab-mine/edit-userInfo/index'
  })
}

const userStore = useUserStore()
const articleStore = useArticleStore()
const itemIndex = ref(0)
const pageResults = computed(() => {
  console.log(articleStore, "| articleStore");
  switch(itemIndex.value) {
    case 0:
      return articleStore.personalListData?.objects
    case 1:
      return articleStore.pageResults.data?.collectFutureOPageResult?.objects
    case 2:
      return articleStore.pageResults.data?.likeFuturePageResult?.objects
    default:
      return []
  }
})
onShow(async () => {
  await userStore.getUserDetail()
  // userInfos.value = userStore.userInfo.userInfos
  const res = await articleStore.articleGetBehaviorList({
    page: 1,
    pageSize: 10
  })
  const resLoacation = await uni.getLocation({
    type: 'wgs84',
  });
  await articleStore.articleList({
    latitude: resLoacation.latitude,
    longitude: resLoacation.longitude,
    page: 1,
    pageSize: 10,
    source: 1,
    userId: userStore.userInfo.userInfos.id
  })
  atten_list[2].num = articleStore.articleListData.objects.reduce((prev, next) => {
    return prev += next.likeCount
  }, 0)
  atten_list[0].num = articleStore.articleListData.objects.reduce((prev, next) => {
    return prev += next.favoriteCount
  }, 0)
})
// 切换Tab状态
const tabList = (item) => {
  itemIndex.value = item.index
}

// 退出登录
const out = () => {
  uni.removeStorageSync('userInfo')
  uni.removeStorageSync('locationData')
  uni.navigateTo({
    url: "/pages/login/index"
  })
}
</script>

<style scoped lang="scss">
.myBox {
  width: 100vw;
  height: 100vh;
  .popup-image {
    width: 100%;
    height: 200px;
    margin-top: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column;
  }
  .popup-box {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    .popup-box-child {
      flex: 1;
      height: 100%;
      border-bottom: 1px solid #eee;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-left: 10px;
    }
  }
}


.lefticon {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 17px;
}

.myLog {
  width: 100%;
  height: 580rpx;
  background: rgb(77, 83, 124);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.head {
  width: 100%;
  /* height: 130px; */
  display: flex;
}

.head_left {
  width: 100px;
  height: 100%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.head_right {
  flex: 1;
  margin-top: 17px;
  margin-left: 5px;
  color: #fff;
}

.head_bot {
  margin-bottom: 80rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bot_left {
  width: 200px;
  height: 100%;
  display: flex;
  /* background: salmon; */
  justify-content: space-evenly;
}

.bot_right {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 100px;
    height: 40px;
    border-radius: 20px;
    line-height: 40px;
    margin-right: 10px;
    background: rgb(115, 121, 161);
    color: #ddd;
    font-size: 14px;
  }
}

.main {
  width: 100%;
  /* height: 500px; */
  /* background: sandybrown; */
  margin-top: -30px;
}

.main_tab {
  width: 100%;
  height: 50px;
  background: #fff;
  border-radius: 12px 12px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_li {
  width: 100%;
  /* height: 200px; */
  /* background: seashell; */
  text-align: center;
}

.pubu {
  width: 100%;
  /* height: 300px; */
  height: auto;
  display: flex;
  justify-content: space-evenly;
  &.data {
    color: #b4b4b4
  }
}

.left {
  width: 46vw;
  height: auto;
  margin-right: 2vw;
}

.left .ul {
  width: 100%;
  height: auto;
}

.left .ul .li {
  font-size: 14px;
  width: 100%;
  height: auto;
  overflow: hidden;

}

.tx {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  padding: 0px 10px;
  margin-top: 10px;
}

.nr {
  box-sizing: border-box;
  padding: 0px 10px;
}

.ttt {
  width: 100%;
  height: 220px;
}

.tt {
  width: 100%;
  height: 200px;
}

.layout {
  box-sizing: border-box;
  padding: 80rpx 60rpx 0rpx;
  button {
    border-radius: 30rpx;
  }
}
</style>